<template>
	<view>
		<uni-nav-bar statusBar :fixed="true" @clickLeft="clickLeft" titleSize="34rpx" :height="50" left-icon="left" title="关于我们" />
		<view class="flexdig tops flexWrapWraps">
			<image src="/static/ic_launcher.png" style="width: 120rpx;height: 120rpx; border-radius: 20rpx;"></image>
			<view class="flexdig flexWrapWraps alignItemsCenter" style="margin-top: 40rpx;">
				<p style="font-size: 40rpx;">imToken</p>
				<p class="fontsizeone">v2.8.3</p>
			</view>
		</view>
		<view class="flexdig win100 flexWrapWrap">
			<view v-for="(item,index) in menuTitleList" :key="index" class="flexWrapWrap flexdig win100 padgina bacolor maginBootom">
				<view v-for="(items,indexs) in item.menuList" :key="indexs"  class=" pagingyz flexWrapWraps flexdig win100  ">
					<view class="flexdig alignItemsCenter justifyContentSpaceBetween">
						<view class="flexdig  flexWrapWraps">
							<!-- <image class="flexdig" :src="items.image" style="width: 55rpx;height: 55rpx;"></image> -->
							<view>
								<text class="flexdig">{{ items.title }}</text>
							</view>
						</view>
						<view class="flexdig">
							<uni-icons v-if="items.types == 'icon'" type="forward" color="#8a8a8a" size="20"></uni-icons>
							<image v-if="items.types == 'image'" class="flexdig" src="/static/star.png" style="width: 40rpx;height: 40rpx;"></image>
							<text v-if="items.types == 'text'" class="fonstzsthree">{{items.rtitle}}</text>
						</view>
					</view>
					<view v-if="items.bottomtitle&&items.bottomtitle != ''">
							<text class="flexdig fontsizetwo ">{{ items.bottomtitle }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuTitleList: [
					{menuList: [
						{title: '地址本',bottomtitle: '请在App Store为我们评分',types:'image',rtitle: ''},
						{title: '版本日志',types:'icon',rtitle: ''},
						{title: '版本更新',types:'',rtitle: ''},
					]},
					{menuList: [
						{title: '网站',types:'text',rtitle: 'http://token.im'},
						{title: '论坛',types:'text',rtitle: 'http://token.im'},
						{title: 'Twitter',types:'text',rtitle: 'http://token.im'},
						{title: '微信公众号',types:'text',rtitle: 'imtoken'},
					]}
				]
			}
		},
		methods: {
			// 返回
			clickLeft(){
				uni.navigateBack({})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fbfcfe;
	}
</style>
<style scoped>
.tops{
	    width: 100%;
	    align-items: center;
	    height: 370rpx;
	    justify-content: center;
}
.flexWrapWraps{
		flex-direction:column ;
	}
	.justifyContentSpaceBetween{
		justify-content: space-between;
	}
	.alignItemsCenter{
		align-items: center;
	}
	.bacolor{
			background-color: #ffffff;
		}
	.flexdig{
			display: flex;
		}
		.alignItemsCenter{
			align-items: center;
		}
		.padgina{
			padding: 0 29rpx;
		}
		.win100{
			width: 100%;
		}
		.pagingyz{
			padding: 24rpx 0;
		}
		.justifyContentSpaceBetween{
			justify-content: space-between;
		}
		.maginBootom{
			margin-bottom: 40rpx;
		}
		.flexWrapWrap{
			flex-wrap: wrap;
		}
		.fontsizeone{
			font-size: 20rpx;
			color: #64707a;
		}
		.fontsizetwo{
			font-size: 25rpx;
			color: #64707a;
		}
		.fonstzsthree{
			color: #008ff4;
			    font-size: 14px;
		}
</style>
